<template>
	<view class="verify-input">
		<view class="verify-input-show"  @click="visible = true">
			<view class="verify-input-show-content">
				<text class="text--secondary-dark"> {{captcha}}</text>
			</view>
			<view class="verify-input-show-btn" >
				<view class="input-border flex--row">
					<view class="input-border-item">
					</view>
					<view class="input-border-item">
					</view>
					<view class="input-border-item">
					</view>
					<view class="input-border-item">	
					</view>
				</view>	
			</view>
		</view>
	
		<view class="popup popup--fixed popup-input-container flex--row" :class="{'active':visible}">
			<view class="verify-input flex--col">
				<view class="input-content">
					<text class="input-fake text--main-dark"> {{captcha}}</text>
					<input class="input-hidden" type="number" maxlength="4" v-model="captcha"  />
				</view>
				<view class="input-border flex--row">
					<view class="input-border-item">
					</view>
					<view class="input-border-item">
					</view>
					<view class="input-border-item">
					</view>
					<view class="input-border-item">	
					</view>
				</view>
			</view>
			<view class="popup popup--absolute popup-verify-input " @click="handleInput" >
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default{
		emits:['validateCaptcha'],
		data(){
			return {
				captcha:"",
				visible:false
			}
		},
		methods:{
			handleInput(){
				if(this.captcha.length === 4){
					this.$emit('validateCaptcha',this.captcha)
					this.visible = false

				}
			}	
		}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 90rpx;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 70rpx;
		font-weight: 700;
		color:#333;
	}
	
	.verify-input{
		width:80%;	
		z-index: 100;
	}
	
	
	.verify-input-show{
		padding:20px;
		&-content{
			letter-spacing: 60rpx;
			height:60rpx;
			padding:10rpx 30rpx;
		}
	}
	
	
	.popup-input-container{
		align-items: center;
		justify-content: center;
		top:0%;
		left:0%;
		height:100%;
		width:100%;
		background: transparent;
		
		display:none;
		&.active{
			display:flex;
		}
	}
	
	
	.popup-verify-input{
		transform: translate(-50%,-50%);
		top:50%;
		left:50%;
		width:100%;
		height:100%;
		backdrop-filter: blur(5px);
		background: transparent;
		
		z-index:99;
	}
	
	.input-content{
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		padding:0rpx 40rpx;
		position:relative;
		
		.input-fake{
			letter-spacing: 100rpx;
			line-height: 90rpx;
		}
		.input-hidden{
			position:absolute;
			top:0%;
			left:0%;
			
			width:100%;
			color:transparent;
			background-color: transparent;
		}
	}

	.input-border{
		gap:4rpx;
	}
	
	.input-border-item{
		background-color: #333;
		height: 1rpx;
		width:100%;
	}
	
	
</style>